<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变换</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    button {
        border: 1px solid black;
        transition: all 4s;
    }

    .rotate {
        background-color: chocolate;
        transform: rotate(45deg);
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .loading {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        animation: rotate 1s linear infinite;
    }

    .display {
        display: none;
    }

    .translate {
        transform: translateX(-100%);
    }
</style>
<body>
<div>
    <button class="btn1">点击后旋转</button>
</div>
<div>
    <button class="btn3">水平移动</button>
</div>
<div>
    <button class="btn2 loading">无限旋转</button>
</div>
</body>
<script>
    document.querySelector(".btn1").addEventListener('click', function (e) {
        this.classList.toggle('rotate')
        document.querySelector('.btn2').classList.toggle('display')
        document.querySelector('.btn3').classList.toggle('translate')
    })
</script>
</html>